<template>
	<vCommonPage type="1" title="项目类别" class="xmlb">
		<div slot="customContent" class="tabPane">
			<div class="choseItemBox speH" v-loading.fullscreen.lock="fullscreenLoading">
				<div :class="projectList[index].isClick? 'Item click':'Item'"
					v-for="(item,index) in projectList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
					v-bind:key="'xz'+index" @click="clickItem(index,item)">
					<div :class="projectList[index].isClick? 'ItemText click':'ItemText'">
						{{item.chargeName}}
					</div>
				</div>
			</div>
			<div class="bottomBox" style="justify-content: space-between;">
				<div>
					<el-button type="primary" class="BtnTextHome" @click="goBack()">返回</el-button>
					<el-button type="primary" class="BtnTextHome" @click="goBackHome()">首页</el-button>
				</div>
				<div style="display: flex; align-items: center;">
					<el-button type="primary" v-show="totalPage>1"
						:class="totalPage == 1 ? 'huiBottom upPage':'blueBottom upPage'" @click="prePage()">
						上一页
					</el-button>
					<div class="pageBox" v-show="totalPage>1">
						<div class="curentPage">{{currentPage}}</div>
						/
						<div class="totalPage">{{totalPage}}</div>
					</div>
					<el-button type="primary" v-show="totalPage>1"
						:class="totalPage == 1 ? 'huiBottom downPage':'blueBottom downPage'" @click="nextPage()">
						下一页
					</el-button>

				</div>
			</div>
		</div>
	</vCommonPage>
</template>
<script>
	import {
		getAllChargeTypeList
	} from "@api/apiBox/jgcx"
	export default {
		name: "mzgh",
		data() {
			return {
				fullscreenLoading: false,
				currentPage: 1, //初始页
				pagesize: 12, //    每页的数据
				projectList: [],
				totalPage: 0
			};
		},
		methods: {
			prePage() {
				if (this.currentPage > 1) {
					this.currentPage--;
				}
			},
			nextPage() {
				if (this.currentPage < this.totalPage) {
					this.currentPage++;
				}
			},
			ReckonTime() {},
			//点击
			async clickItem(index, item) {
				this.$router.push({
					name: 'jgcxSearch',
					query: {
						data: JSON.stringify(item)
					}
				})
			},
			clearClick() {
				let list = this.projectList;
				for (let item of list) {
					item.isClick = false;
				}
				this.projectList = list;
			},
			//获取项目类别信息
			async initData() {
				let data = {
					data:{
						
					},
					that:this
				}
				const res = await getAllChargeTypeList(data);
				this.projectList = res.data;
				this.totalPage = parseInt((this.projectList.length + this.pagesize - 1) / this.pagesize)
			}
		},
		computed: {},
		components: {},
		mounted() {},
		created() {
			this.initData();
		}
	};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import "../../assets/css/mzghYy/xzks.scss";

	.tabPane {
		width: 100%;
		height: 100%;
		// padding-top: 40px;	
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	@media (min-height: 0px) and (max-height: 1910px) {
		.speH {
			height: 46.4375rem;
		}
	}

	@media (min-height: 1919px) {
		.speH {
			height: 100%;
			padding-top: 0.825rem;
		}
	}

</style>

<style>
	.xmlb .el-row-vertical {
		height: calc(100% - 300px) !important;
		width: 100%;
	}
	
	@media (min-height: 0px) and (max-height: 1910px) {
		.xmlb .el-main {
			height: 50.4375rem !important;
		}
	}
</style>
